<template>
  <div class="parkInfoWindow">
    <el-card>
      <template #header>
        <div class="header-content">停车记录</div>
        <el-icon class="header-close" @click="handleClose"><ep-Close /></el-icon>
      </template>
      <el-descriptions :column="1" class="mt-5px">
        <el-descriptions-item label="开始时间：">{{ parkInfo.parkStartTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间：">{{ parkInfo.parkOverTime }}</el-descriptions-item>
        <el-descriptions-item label="停车时长：">{{ parkInfo.time }}</el-descriptions-item>
        <el-descriptions-item label="停车地址：">{{ parkInfo.address }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="arrows"></div>
  </div>
</template>

<script lang="ts" setup>
import type { ParkRecordData } from '@/api/vehicle-track/vehicleTrack'

defineProps<{ parkInfo: ParkRecordData }>()

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}
</script>
<style lang="scss" scoped>
.parkInfoWindow {
  position: relative;
  font-size: 14px;
  width: 300px;
}
.arrows {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-width: 8px;
  border-right-width: 8px;
  border-top-width: 10px;
  border-top-color: var(--el-bg-color-overlay);
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
}

:deep(.el-card__header) {
  padding: 10px 35px 5px 10px;
  position: relative;
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
  }
  .header-close {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
:deep(.el-descriptions__label) {
  margin-right: 5px;
}
:deep(.el-card__body) {
  padding: 5px 10px 10px 10px;
}
:deep(.el-descriptions__header) {
  margin-bottom: 6px;
}
:deep(.el-descriptions__title) {
  font-size: 14px !important;
}
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
  padding: 0;
}
</style>
